<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{margin:0;padding:0;}
	#box{
		width:200px;
		height:100px;
		background:black;
		color:#fff;
		position:fixed;
		left:50%;
		top:50%;
		font-size:36px;
		line-height:100px;
		text-align:center;
		display:none;
		margin-left:-100px;
		margin-top:-50px;
		}
</style>
</head>
<script>
window.onload=function(){
	var box=document.getElementById('box');
	
		huabu=document.getElementById('huabu');
		hua=huabu.getContext('2d');
		hua.beginPath();
		hua.fillStyle='#ccc';
		hua.fillRect(0,0,1525,1525);
		

		function zuobiao(n){	//通过此函数，创建所有的节点对象，并且求出各个节点的坐标；
		    node=[];
			node[0]='';
			for(var i=1;i<=n;i++){
				node[i]=[];
				node[i][0]=''
				for(var j=1;j<=n;j++){
					node[i][j]={};//设定节点对象
					if(i==1&&j==1){
					node[i][j].x=25;//设定第一个节点的x和y坐标
					node[i][j].y=25;
					node[i][j].win=100;
					}
					else{
						node[i][j].x=node[i][j-1].x||node[i-1][j].x+50;//根据与设定好的节点对象的坐标关系，分别求出此节点的x和y坐标；
						node[i][j].y=node[i][j-1].y+50||node[i-1][j].y;
						node[i][j].win=100;
						}
					}
				}	
			}
		
		function draw(n){//此函数，通过各个节点的坐标属性，然后连接纵排的节点，和横排的节点，实现方格的效果；
			zuobiao(n);
			num=n;
			for(var i=1;i<=n;i++){
				hua.beginPath();
				
				hua.moveTo(node[i][1].x,node[i][1].y);
				for(var j=1;j<=n;j++){
					hua.lineTo(node[i][j].x,node[i][j].y)
					}
				hua.stroke();
				
				hua.closePath();
				}
			for(var z=1;z<=n;z++){
				hua.beginPath();
				hua.moveTo(node[1][z].x,node[1][z].y);
				for(var k=1;k<=n;k++){
					hua.lineTo(node[k][z].x,node[k][z].y)
					}
				hua.stroke();
				hua.closePath();
				}
			
			}
		draw(30)
		var wanjia=1
		huabu.onclick=function(eve){
			
			
			
			var e=eve||window.event;
			var x=e.offsetX;
			var y=e.offsetY;
			for(var i=1;i<=num;i++){//计算下棋的坐标位置，画棋子
				for(var j=1;j<=num;j++){
		
					
					if((x+15>=node[i][j].x&&x-15<=node[i][j].x)&&(y+15>=node[i][j].y&&y-15<=node[i][j].y)){
						if(node[i][j].win==100){
						hua.beginPath();
						var n1=node[i][j].x;
						var n2=node[i][j].y;
						if(wanjia%2==0){//判断该下什么颜色的棋子
							hua.fillStyle=color(0,n1,n2);//玩家二的棋子
							node[i][j].win=0;
							}
						if(wanjia%2==1){
							hua.fillStyle=color(1,n1,n2);//玩家一的棋子
							node[i][j].win=1;
							}
						hua.arc(node[i][j].x,node[i][j].y,20,0,2*Math.PI,true)
						hua.fill();
						wanjia++
						hua.closePath();
					}else{
						alert('不能在有棋子的位置下棋')
						}
						}
						
					}	
					
				}
				
					for(var k=1;k<=num-4;k++){	//判断五子连珠，确定输赢
						for(var m=1;m<=num-4;m++){		
					//判断五子连珠
						var sum1=0;
						var sum2=0;
						var sum3=0;
						var sum4=0;
						for(var z=0;z<5;z++){
							sum1+=node[k][m+z].win;//横向输赢
							sum2+=node[k+z][m].win;//纵向输赢
							sum3+=node[k+z][m+z].win;//斜向输赢 \ 方向
							sum4+=node[k+4-z][m+z].win;	//斜向输赢 / 方向
							}
						if(sum1==0||sum1==5||sum2==0||sum2==5||sum3==0||sum3==5||sum4==0||sum4==5){//判断是否已经有五子连珠
							console.log(sum1+'<br/>'+sum2+'<br/>'+sum3+'<br/>');
							if(wanjia%2==1){//判断具体的赢家
								alert('黑棋胜利')
								}
							else{
								alert('白棋胜利')
								}
							node='';//销毁坐标数据对象，目的是，当胜负已分的时候，不能下棋
							box.style.display='block';
							box.onclick=function(){
								hua.clearRect(0,0,1525,1525);
								hua.fillStyle='#ccc';
								hua.fillRect(0,0,1525,1525);
								wanjia=1;
								draw(30);
								this.style.display='none';
								}
							break;
							}
						
						
						}	
					}
				
			}
			function color(a,b,c){  //棋子颜色的选择
			switch(a){
				case 0: var gad1=hua.createRadialGradient(b,c,1,b,c,20);
							gad1.addColorStop(0.1,'#ccc');
							gad1.addColorStop(1,'#000');
							return gad1;
							break;
							
				case 1: var gad2=hua.createRadialGradient(b,c,1,b,c,20);
							gad2.addColorStop(0.5,'#fff');
							gad2.addColorStop(1,'#ddd');
							return gad2;
							break;
							
				}
		
			}
		
}
</script>
<body>
<canvas id="huabu" width="1525" height="1525"></canvas>
<div id="box">从新开始</div>
</body>
</html>
